<template>
	<view>
		<nav-bar ref="navBar" type="transparentFixed" fontColor="#FFF" bgColor="#000" transparentFixedFontColor="#FFF">VIP</nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="vip_bg_box">
			<view class="status_bar"></view>
			<view class="user_info_box">
				<image :src="userInfo.headImg" mode="aspectFill"></image>
				<view class="info">
					<view class="name"><text>{{ userInfo.nickName  || ""}}</text>
						<view>{{ userInfo.memberRoleName || "" }}</view>
					</view>
					<view class="tip">
						积分：
						<text>{{ userInfo.integralCount || "0" }}</text>
						，距离下个等级还需
						<text>{{ userInfo.nextLevelRequireIntegral  || "0"}}</text>
						积分
					</view>
				</view>
			</view>
			<view class="vip_tip">多用多省，少用不亏</view>
			<view class="vip_table">
				<view class="table_list">
					<text></text>
					<text>积分</text>
					<text>享受折扣</text>
				</view>
				<view class="table_list" v-for="(item,index) of memberList" :key="index" :class="{black: index%2 == 0}">
					<text>{{ item.levelName }}</text>
					<text>{{ item.minIntegral }} - {{ item.maxIntegral }}</text>
					<text>{{ item.discountRateStr }}</text>
				</view>
			</view>
			<view class="btn_box" @click="onPageJump('/pagesMy/my/vip/recharge')">
				<button>去升级</button>
			</view>
		</view>
		<view class="vip_goods_box">
			<view class="fixed_box">
				<view class="">
					<view class="title">
						<image src="../../../static/icon/vip/ic_vip_title.png" mode="aspectFit"></image>
					</view>
					<!-- 商品类型筛选 -->
					<goods-type-select color="vip" @change="goodsTypeChange"></goods-type-select>
				</view>
			</view>
            <mescroll-body class="goods_list_scroll" ref="mescrollRef" height="-322" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
                <view class="goods_list_box">
                	<view class="goods_item" v-for="(item,index) of goodsList" :key="index">
                		<image :src="item.img" mode="aspectFill"></image>
                		<view class="info">
                			<view class="vip_price">
                				<text class="vip_label">VIP</text>
                				<text class="vip_price">{{ item.priceDiscount }}</text>
                				<text class="price">{{ item.priceShop }}</text>
                			</view>
                			<view class="name">{{ item.name }}</view>
                		</view>
                	</view>
                </view>
            </mescroll-body>
			<view class="interval"></view>
			<view class="recharge_btn" v-if="pageScroll > 700">
				<view>立即充值，快速提升<text>会员等级</text></view>
				<button @click="onPageJump('/pagesMy/my/vip/recharge')">去充值</button>
			</view>
		</view>
	</view>
</template>

<script>
	import goodsTypeSelect from '@/components/module/goods_type_select';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import MescrollMixin from "@/components/common/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			goodsTypeSelect,
		},
		data() {
			return {
				pageScroll: 0,
				memberList: [],
				downOption: {
					auto: false, //是否在初始化后,自动执行downCallback; 默认true
                    use: true
				},
				goodsList: []
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		//第一次加载
		onLoad(e) {
            this.pageData();
		},
		//页面显示
		onShow() {},
		//方法
		methods: {
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			pageData() {
				this.$http.get('api/open/v1/member_role_rules').then(res => {
					this.memberList = res;
				});
			},
			goodsTypeChange(e) {
				this.typeId = e.objId;
				this.mescroll.triggerDownScroll();
			},
            /*下拉刷新的回调 */
            downCallback() {
            	//联网加载数据
            	this.loadData(1);
            },
            /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
            upCallback(page) {
            	//联网加载数据
            	this.loadData(page.num);
            },
            loadData(pageNo) {
                let httpData = {
                    pageNo: pageNo,
                    pageSize: 15,
                    goodsType: "vip"
                };
                if(this.typeId){
                	httpData.typeId = this.typeId;
                }
                this.$http
                	.post('api/mall/goods/v1/list', httpData,{
                		load:false
                	}).then(res => {
                		uni.stopPullDownRefresh();
                		//方法一(推荐): 后台接口有返回列表的总页数 totalPage
                		this.mescroll.endByPage(res.data.length, res.pages); //必传参数(当前页的数据个数, 总页数)
                		
                		if (pageNo == 1) {
                			this.goodsList = res.data;
                		} else {
                			this.goodsList = this.goodsList.concat(res.data);
                		}
                	}).catch(() => {
                		//联网失败, 结束加载
                		this.mescroll.endErr();
                	});
            },
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		onPageScroll(e) {
			this.$refs.navBar.pageScroll(e);
			this.pageScroll = e.scrollTop;
		},
		//页面下来刷新
		onPullDownRefresh() {
			this.pageNo = 1;
			this.pages = 1;
			this.loadData();
		},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import "@/style/mixin.scss";

	.vip_bg_box {
		background-color: #000;
		background-image: url(http://qn.kemean.cn/upload/202009/01/bg_vip.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		width: 100%;
		padding-bottom: 60rpx;
		position: fixed;
		left: 0;
		top: 0;

		.status_bar {
			height: var(--status-bar-height);
		}

		.user_info_box {
			padding-top: 120rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			display: flex;
			align-items: center;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				flex-shrink: 0;
			}

			.info {
				margin-left: 24rpx;

				.name {
					display: flex;
					align-items: center;

					text {
						font-size: 24rpx;
						color: #ffffff;
					}

					view {
						font-size: 24rpx;
						color: #ffffff;
						margin-left: 25rpx;
					}
				}

				.tip {
					font-size: 24rpx;
					color: #999999;
					margin-top: 12rpx;

					text {
						font-size: 24rpx;
						color: #e6bc5a;
					}
				}
			}
		}

		.vip_tip {
			margin-top: 400rpx;
			text-align: center;
			font-size: 28rpx;
			color: #ffffff;
		}

		.vip_table {
			margin: 0 75rpx;
			border-right: solid 1rpx #999999;
			border-bottom: solid 1rpx #999999;
			margin-top: 95rpx;

			.table_list {
				display: flex;
				border-top: solid 1rpx #999999;

				&.black text {
					background-color: #000;
				}

				text {
					flex: 1;
					height: 56rpx;
					border-left: solid 1rpx #999999;
					background-color: #444444;
					font-size: 24rpx;
					color: #ffffff;
					line-height: 56rpx;
					text-align: center;
				}
			}
		}

		.btn_box {
			margin-top: 60rpx;
			display: flex;
			justify-content: center;

			button {
				width: 480rpx;
				height: 88rpx;
				background-image: linear-gradient(267deg, #eccc82 0%, #d4a842 100%);
				border-radius: 44rpx;
				font-size: 32rpx;
				color: #ffffff;
			}
		}
	}

	.vip_goods_box {
		background-color: #000;
		position: relative;
		top: calc(var(--status-bar-height) + 1386rpx);
		z-index: 1;

		.fixed_box {
			position: sticky;
			top: calc(var(--status-bar-height) + 88rpx);
			z-index: 2;
			background-color: #000;

			>view {
				border-radius: 40rpx 40rpx 0 0;
				padding: 40rpx 30rpx 10rpx 30rpx;
				background-color: #f7f7f7;
			}

			.title {
				display: flex;
				justify-content: center;
				padding-bottom: 20rpx;

				image {
					width: 320rpx;
					height: 64rpx;
				}
			}
		}
        .goods_list_scroll {
            background-color: #f7f7f7;
        }
		.goods_list_box {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 0 24rpx;
			background-color: #f7f7f7;

			.goods_item {
				width: 345rpx;
				background-color: #FFF;
				margin-bottom: 12rpx;

				image {
					width: 345rpx;
					height: 345rpx;
				}

				.info {
					padding: 24rpx;

					.vip_price {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.vip_label {
							width: 84rpx;
							height: 45rpx;
							background-color: #eccc82;
							border-radius: 44rpx;
							font-size: 24rpx;
							color: #ffffff;
							text-align: center;
							line-height: 45rpx;
						}

						.vip_price {
							font-size: 24rpx;
							color: #ff403f;
							font-weight: bold;
						}

						.price {
							font-size: 24rpx;
							color: #cccccc;
							text-decoration: line-through;
						}
					}

					.name {
						margin-top: 12rpx;
						font-size: 28rpx;
						color: #333333;
						@include bov(2);
					}
				}
			}

			.load_more {
				width: 100%;
			}
		}

		.interval {
			height: 100rpx;
			background-color: #f7f7f7;
		}

		.recharge_btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 12rpx 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #FFF;

			view {
				font-size: 28rpx;
				color: #333333;

				text {
					color: #eccc82;
				}
			}

			button {
				width: 200rpx;
				height: 74rpx;
				line-height: 74rpx;
				background-image: linear-gradient(270deg, #eccc82 0%, #d4a842 100%);
				border-radius: 37rpx;
				font-size: 32rpx;
				color: #ffffff;
			}
		}
	}
</style>
